<template>
    <div>
        <Modal :value="editModalStatus" width="360" @on-cancel="closeModal">
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{title}}</span>
            </p>
            <div style="text-align:left">
                <Form ref="infoData" :model="infoData" :rules="ruleValidate" :label-width="60">
                    <FormItem label="登录名" prop="account">
                        <Input v-model="infoData.account" placeholder="请输入登录名"></Input>
                    </FormItem>
                    <FormItem label="姓　名" prop="username">
                        <Input v-model="infoData.username" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="手　机" prop="mobilePhone">
                        <Input v-model="infoData.mobilePhone" placeholder="请输入手机号"></Input>
                    </FormItem>
                    <FormItem label="角　色" prop="userRoleId">
                        <Select v-model="infoData.userRoleId" placeholder="角色">
                            <Option :key="list.roleId" :value="list.roleId" v-for="list in validCharacter">
                                {{list.roleName}}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="备　注" prop="remarks">
                        <Input v-model="infoData.remarks" type="textarea" :autosize="{minRows: 3,maxRows: 5}"
                               placeholder="说点什么..."></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="loading" @click="handleSubmit('infoData')">提交
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'

    export default {
        props: ['editData', 'editModalStatus', 'title', 'userId'],
        data() {
            return {
                loading: false,
                validCharacter: [],
                ruleValidate: {
                    account: [
                        {required: true, message: '登录名不能为空', trigger: 'blur'}
                    ],
                    username: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    mobilePhone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'}
                    ],
                    userRoleId: [
                        {required: true, message: '请选择角色', trigger: 'change'}
                    ],
                    remarks: [
                        {type: 'string', max: 100, message: '备注不能多于20字', trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            handleSubmit(name) {
                let vm = this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.axios.post(API.SAVE_ACCOUNT, qs.stringify(vm.infoData)).then(response => {
                            if (response.data.code === 1) {
                                this.infoData.authorihyId = response.data.data.authorihyId;
                                this.postUserRole();
                            } else {
                                this.$Message.error(response.data.msg);
                            }
                        }, response => {
                            this.$Message.error('网络异常!');
                        })
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            getCharacterFn() {
                this.axios.get(API.VALID_CHARACTER_LIST).then(response => {
                    //console.log(response)
                    if (response.data.code === 1) {
                        this.validCharacter = response.data.data;
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                    this.$Message.error('网络异常!');
                })
            },
            postUserRole() {
                let vm = this;
                this.axios.post(API.SAVE_USER_ROLE, qs.stringify({
                    roleIds: this.infoData.userRoleId,
                    userId: this.infoData.authorihyId
                })).then(res => {
                    if (res.data.code == 1) {
                        vm.$emit('closeModal');
                        vm.$Message.success(acct.data.msg);
                    } else {
                        vm.$Message.error(acct.data.msg);
                    }
                })
            },
            closeModal() {
                this.$emit('closeModal');
            }
        },
        computed: {
            infoData() {
                return this.editData;
            }
        },
        mounted() {
            this.getCharacterFn();
        }
    }
</script>
<style lang='scss'>

</style>
